#list{
  margin: 50px auto;
  padding: 0;
  list-style: none;
  width: 600px;
  border:1px solid #ccc;
  li{
    padding: 10px;
    border-bottom: 1px solid #ccc;
    a{
      font-size: 14px;
      color: #333;
      text-decoration: none;
    }

    &:last-child{
      border-bottom: 0;
    }
    &:nth-child(odd){//奇数行
      background-color: #f5f5f5;
    }
    &:nth-child(even){//偶数行
      background-color: #ddd;
    }
    &:hover{
      background-color: #2aabd2;
      a{
        color: white;
      }
    }
  }
}
.box{
  margin: 60px auto;
  width: 150px;
  span{
    float: left;
    width: 30px;
    height: 30px;
    background-color: #ccc;
    border-radius: 50%;
    margin-right: 10px;
    &:last-child{
      margin-right: 0;
    }
    &.active{//交集选择器
      background-color: #2aabd2;
    }
  }
  &::after{
    content: '';
    display: block;
    clear: both;
  }
}